<template>
  <div>
    <overview-nav />
    <div class="container-main">
      <el-form
        class="build-form"
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <div class="title-header">
          发布构建
          <p class="sub-title">一键构建生成多环境发布包下载，也可一键发布容器平台</p>
        </div>

          <div v-if="showResource">

          <el-form-item label="构建场景" prop="buildScene">
            <el-radio-group
                @change="selectBuildScene"
                v-model="formData.buildScene" size="medium">
              <el-radio
                v-for="(item, index) in buildSceneList"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>

          <el-divider
            @click="showResource = !showResource"
            content-position="left">资源配置</el-divider>

          <el-form-item label="CPU资源" prop="resourceRequestCpu">
              <el-input
                v-model="formData.resourceRequestCpu"
                placeholder="请输入请求CPU资源"
                clearable
                class="input-resource"
                :style="{ width: '30%' }"
              >
                <template slot="append">m</template>
              </el-input>
              <el-input
                v-model="formData.resourceLimitCpu"
                placeholder="请输入最大CPU资源"
                clearable
                class="input-resource"
                :style="{ width: '30%'}"
              >
                <template slot="append">m</template>
              </el-input>
            </el-form-item>
            <el-form-item label="内存资源" prop="resourceRequestMem">
              <el-input
                v-model="formData.resourceRequestMem"
                placeholder="请输入请求内存资源"
                clearable
                class="input-resource"
                :style="{ width: '30%' }"
              >
                <template slot="append">Mi</template>
              </el-input>
              <el-input
                v-model="formData.resourceLimitMem"
                placeholder="请输入最大内存资源"
                clearable
                class="input-resource"
                :style="{ width: '30%'}"
              >
                <template slot="append">Mi</template>
              </el-input>
            </el-form-item>
            <el-form-item label="容器端口" prop="containerPort">
              <el-input
                v-model="formData.containerPort"
                placeholder="请输入容器端口"
                clearable
                :style="{ width: '20%' }"
              >
              </el-input>
            </el-form-item>
            </div>

          <el-divider @click="showParams = !showParams" content-position="left">容器参数</el-divider>
          <div v-if="showParams">

            <el-form-item label="自定义" prop="paramsName">
              <el-input
                v-model="formData.paramsName"
                placeholder="参数名"
                clearable
                class="input-resource"
                :style="{ width: '30%' }"
              >
              </el-input>
              <el-input
                v-model="formData.paramsValue"
                placeholder="参数值"
                clearable
                class="input-resource"
                :style="{ width: '40%'}"
              >
              </el-input>
              <el-button icon="el-icon-plus" @click="addParams" circle></el-button>
            </el-form-item>
          </div>

        <el-form-item label="监控服务" prop="serviceMonitor">
          <el-checkbox-group v-model="formData.serviceMonitor" size="medium">
            <el-checkbox
              v-for="(item, index) in serviceMonitorList"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" @click="submitForm"><i class="fab fa-docker"></i> 发布容器</el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import OverviewNav from "./overviewNav";
import {buildProjectParams , buildGitlab , buildDockerStatus , buildDocker , buildK8S , getBuildProjectParams} from "@/api/api";

export default {
  components: {
    OverviewNav,
  },
  data() {
    return {
      showParams: false ,
      cicdDialogVisible: false,
      jenkinsJobName: '',
      currentStep: -1 ,
      currentStepIcon: "el-icon-loading" ,
      showResource: true ,
      processStep:[
        {title:'构建镜像包', desc:'持续集成并构建镜像包'} ,
        {title:'发布容器' , desc:'发布k8s容器镜像'} ,
        {title:'发布域名' , desc:'发布可访问域名'} ,
      ],
      formData: {
        buildType: "kubernates",
        buildScene: "dev",
        serviceMonitor: "",
        containerPort: "8080",
        resourceRequestCpu: "5",
        resourceLimitCpu: "20",
        resourceRequestMem: "128",
        resourceLimitMem: "1024",
      },
      rules: {
        buildType: [
          {
            required: true,
            message: "构建类型不能为空",
            trigger: "change",
          },
        ],
        resourceRequestCpu: [
          {
            required: true,
            message: "请输入CPU资源",
            trigger: "blur",
          },
        ],
        resourceRequestMem: [
          {
            required: true,
            message: "请输入内存资源",
            trigger: "blur",
          },
        ],
        containerPort: [
          {
            required: true,
            message: "请输入容器端口",
            trigger: "blur",
          },
        ],
      },
      buildSceneList: [
        { value: "dev", label: "开发环境" },
        { value: "normal", label: "普通环境" },
        { value: "pro", label: "生产环境" },
      ],
      serviceMonitorList: [
        { label: "应用运行监控", value: "1" },
        { label: "SQL审计监控", value: "2" },
        { label: "日志监控服务", value: "3" },
        { label: "链路跟踪", value: "4" },
      ],
    };
  },
  created(){
    console.log('create');
    this.initInfo();
  },
  methods: {
    initInfo(){
      var pId = this.$route.params.pId ;

      getBuildProjectParams(pId).then(response =>{
        console.log('pId = ' + response) ;
      }) ;
    },
    currentIcon(index){
      if(this.currentStep == index){
        return "el-icon-loading" ;
      }else{
        return '' ;
      }
    },
    submitForm() {

      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;

        const loading = this.$loading({
          lock: true,
          text: '正在构建镜像中,预计15秒左右',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        var pId = this.$route.params.pId ;
        this.formData.projectId = pId ;

        buildProjectParams(this.formData).then(response =>{
            buildK8S(pId).then(response =>{
              console.log('response = ' + response);
              loading.close();
            },error => {
              loading.close();
            }) ;
        });

      });
    },
    selectBuildScene(v){

      console.log("value = " + v);

      if(v == "dev"){
        this.formData.resourceRequestCpu = "5"
        this.formData.resourceLimitCpu = "20"

        this.formData.resourceRequestMem = "128"
        this.formData.resourceLimitMem = "1024"
      } else if(v == "pro"){
        this.formData.resourceRequestCpu = "20"
        this.formData.resourceLimitCpu = "100"

        this.formData.resourceRequestMem = "1024"
        this.formData.resourceLimitMem = "4095"
      } else if(v == "normal"){
        this.formData.resourceRequestCpu = "10"
        this.formData.resourceLimitCpu = "50"

        this.formData.resourceRequestMem = "512"
        this.formData.resourceLimitMem = "2048"
      }
    },
    addParams(){

    } ,
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">

.build-form{
  width: 980px;
  max-width: 980px;
  margin: auto;

  .input-resource{
    margin-right: 20px;
  }

  .el-divider__text{
    cursor: pointer ;
  }
}

.title-header{
  text-align: center;
  padding: 20px;
  font-size: 25px;

  .sub-title {
    font-size: 13px ;
    font-weight: normal ;
  }
}

</style>
